<template>
  <div>
    <vxe-toolbar ref="xToolbar1" custom print></vxe-toolbar>
    <vxe-table ref="table" border height="460"
               show-overflow="tooltip"
      :style="{fontSize:Size}"
      :checkbox-config="{ highlight: true, range: true }"
      auto-resize
      @header-cell-dblclick="headerCell"
      :data="tableData"
      :row-config="{isCurrent: true,height:height}"
      :keyboard-config="{isArrow: true}"
      :print-config="{}"
      :column-config="{resizable: true}"
      @checkbox-change="checkboxChange"
       @checkbox-all="selectAllEvent"
      :loading="tableLoading"
      >
      <vxe-column
        v-for="config in columns"
        :key="config.key"
        :type="config.type"
        :field="config.field"
        :title="config.title"
        :fixed="config.fixed"
        :width="config.width"
        :filters="config.filters">
      </vxe-column>
     <slot/>
    </vxe-table>
    <!-- <button @click="getSelectData">按钮</button> -->
  </div>
</template>

<script>

export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    Shuju: {
      type:Object,
      //required:true
    }
  },
  data() {
    return {
      height: 60,
      Size:12+'px',
      tableLoading: true
    }
  },
  watch: {
    tableData: {
      handler(newData) {
        if (newData.length > 0) {
          this.tableLoading = false;
        }
      },
      immediate: true // 立即触发回调函数
    }
  },
  created() {
    this.$nextTick(() => {
      // 手动将表格和工具栏进行关联
      this.$refs.table.connect(this.$refs.xToolbar1)
    })
  },
  methods: {
    //获取表头数据
    headerCell({ column }){
      const checkedRows = this.$refs.table.getCheckboxRecords()
      const List = checkedRows.map(item=>item.id)
      const col={
        column:column.field,
        List:List
      }
      this.$emit('changeList',col)
    },
    checkboxChange() {
      const checkedRows = this.$refs.table.getCheckboxRecords()
      console.log(checkedRows)
      this.$emit('listen',checkedRows)
    },
    getSelectData() {
      const data = this.$refs.table.getCheckboxRecords()
      return data
    },
    changeSize(){
      this.Size=this.Shuju.fontSize+'px'
      this.height = this.Shuju.Height
     // return this.Size;
    },
    selectAllEvent ({ checked, records }) {
      console.log(checked ? '所有勾选事件' : '所有取消事件', records)
      this.$emit('listen',records)
    },
  }
}

</script>

<style scoped>

</style>
